<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04_Vue的Mustache插值语法</title>
</head>
<body>

  <div class="app">
    <h1>{{ message }}</h1>
    <p>当前计数: {{ count }}</p>

    <p>当前计数: {{ count > 5 ? '大于5' : '小于等于5' }}</p>

    <h2>{{ formatDate(time) }}</h2>

    <button @click="increment">增加计数</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello, Vue!',
          count: 0,
          date: new Date()
        };
      },
      methods: {
        increment() {
          this.count++;
          this.message = `当前计数：${this.count}`;
        },
        formatDate: function(date) {
          return "2022-10-10-" + date
        }
      },
    });
    app.mount('.app');
  </script>
  
</body>
</html>